<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>组件事件监听</title>
		<link rel="stylesheet" href="">
		<script src="../libs/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="root">
			<h4>{{message}}</h1>
				<table>
					<tr is='row'></tr>
					<tr is='row'></tr>
					<tr is='row'></tr>
				</table>
				<ul>
					<li is='row'></li>
				</ul>
				<div>
					<select is='div-select'></select>
				</div>

				<div>
					<!--如果子组件不是通过$emit监听时可以不设此事件-->
					<!--mode1 $emit-->
					<compute @change-data='fatherMethod'></compute>
					<!--mode2 $parent-->
					<compute></compute>
					<!-- 第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法 -->
					<!--mode3 -->
					<compute :father-method='fatherMethod'></compute>
					
					<div>计算总数{{totalCount}}</div>
				</div>
		</div>
	</body>

	<script>
		Vue.component(
			'row', {
				template: '<tr><td>{{msg}}</td><td>2222</td></tr>',
				data: function() {
					return {
						msg: 'xxxx'
					}
				}
			}
		);
		Vue.component(
			'div-select', {
				template: `<select>
						<option>1111</option>
						<option selected="selected">2222</option>
					</select>`
			}
		);

		Vue.component(
			'compute', {
				//mode3中使用props接收父组建传过来的方法
				props:
				{
					fatherMethod:{
						type:Function,
						default:null
					}
				},
				template: '<button @click="computeCount()">点击计算：{{count}}</button>',
				data: function() {
					return {
						count: 0
					}
				},
				methods: {
					computeCount: function() {
						this.count++;
						//$emit监听父组件的自定义事件,命名必须全小写，可以使用- 
						//this.$emit('change-data',this.count);
						//$parent直接调用父组件方法
						//this.$parent.fatherMethod();
						//mode3
						if(this.fatherMethod)
						{
							console.log(111); 
							this.fatherMethod(3,100); //可以传递多个参数到父组件
						}
					}
				}
				
			}
		)

		var vm = new Vue({
			el: '#root',
			data: {
				message: '组件基础',
				totalCount: 0
			},
			methods: {
				fatherMethod: function(count,countb) {
					if (count && countb){
						console.log(count);
						console.log(countb);
						this.totalCount+=count+countb;
					}else{
						this.totalCount++;
					}
				}
			}
		});
	</script>
</html>
